<template>
  <div class="all">
    <!-- header -->
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="" />
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>管理分组</span>
      </div>
      <div class="div">
        <span class="solid" @click="back()">完成</span>
      </div>
    </header>

    <!-- 默认分组id-99 -->
    <div class="fold1">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          title="默认分组"
          :name="默认"
          icon="arrow"
          @click.native="arrow(99)"
        >
          <template #icon>
            <van-icon
              :name="icon2[99] == 1 ? 'arrow-down' : 'arrow'"
              style="margin-top: 5px; margin-right: 5px"
            />
          </template>
          <template #right-icon>
            <van-icon
              :name="activeNames == 0 ? '' : ''"
              style="margin-top: 5px; margin-right: 5px"
            />
          </template>
          <!-- 主体展示 -->
          <div class="main">
            <van-field
              v-for="(item2, index) in pgroupPatientList"
              :key="item2.pgroup_id"
              type="text"
              readonly
              :label="item2.NICK_NAME"
              v-show="item2.pgroup_id == null"
              @click="check(99 * 1000 + item2.patient_user_id, 99)"
            >
              <template #label>
                <img :src="item2.PHOTO" alt="" class="picture" />
                <h style="font-size: 15px; margin-buttom: 5px">{{
                  item2.NICK_NAME
                }}</h>
              </template>
              <template #right-icon>
                <van-checkbox
                  v-model="checked[99 * 1000 + item2.patient_user_id]"
                  shape="square"
                  v-show="!groupshow[99]"
                ></van-checkbox>
              </template>
            </van-field>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>

    <!-- main -->
    <div class="fold">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="(item, index) in pgroupList"
          :key="item.id"
          :title="item.pgroup_name"
          :name="item.id"
          icon="arrow"
          @click.native="arrow(item.id)"
        >
          <template #icon>
            <van-icon
              :name="icon2[item.id] == 1 ? 'arrow-down' : 'arrow'"
              style="margin-top: 5px; margin-right: 5px"
            />
          </template>
          <template #right-icon>
            <van-icon
              :name="activeNames == 0 ? '' : ''"
              style="margin-top: 5px; margin-right: 15px"
            />
          </template>
          <!-- 主体展示 -->
          <div class="main">
            <van-field
              v-for="(item2, index) in pgroupPatientList"
              :key="item2.pgroup_id"
              type="text"
              readonly
              :label="item2.NICK_NAME"
              v-show="item2.pgroup_id == item.id"
              clickable
              @click="check(item.id * 1000 + item2.patient_user_id, item.id)"
            >
              <template #label>
                <img :src="item2.PHOTO" alt="" class="picture" />
                <h style="font-size: 15px; margin-buttom: 5px">{{
                  item2.NICK_NAME
                }}</h>
              </template>
              <template #right-icon>
                <van-checkbox
                  v-model="checked[item.id * 1000 + item2.patient_user_id]"
                  shape="square"
                  v-show="!groupshow[item.id]"
                ></van-checkbox>
              </template>
            </van-field>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <!-- 占位符 -->
    <div style="height: 100px"></div>

    <!-- button -->
    <div class="btn">
      <div class="div1">
        <button :class="{ b1: blue[1], b2: grey[1] }" @click="del()">
          <h class="text">删除</h>
        </button>
      </div>
      <div class="div1">
        <button :class="{ b1: blue[2], b2: grey[2] }" @click="copy()">
          <h class="text">复制</h>
        </button>
      </div>
      <div class="div1">
        <button :class="{ b1: blue[3], b2: grey[3] }" @click="move()">
          <h class="text">移动</h>
        </button>
      </div>
    </div>

    <!-- save新建分组 -->
    <van-dialog
      v-model="addshow"
      title="添加分组"
      show-cancel-button
      @confirm="save()"
      confirm-button-color="blue"
    >
      <div class="name">
        <input type="text" v-model="pgroup_name" class="nameinput" />
      </div>
    </van-dialog>

    <!-- del删除人员 -->
    <van-dialog
      v-model="delshow"
      title="确定删除该分组下的所选人员吗？"
      show-cancel-button
      @confirm="delg()"
      confirm-button-color="blue"
    >
      <div class="name">
        <h
          style="
            font-size: 15px;
            color: #e5e5e5;
            margin-top: 3%;
            margin-bottom: 3%;
          "
          >删除之后将到“默认分组”</h
        >
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default {
  naem: 'Managegroup',
  data() {
    return {
      team_id: this.$route.query.team_id,
      activeNames: [''],
      activeNames1: '',
      pgroupList: [],
      pgroupPatientList: [],
      icon2: [], //控制箭头转向
      checked: [],
      groupchecked: [],
      flag: false, //是否选择人员
      blue: [1, 0, 0, 0],
      grey: [0, 1, 1, 1],
      pgroup_name: '',
      addshow: false,
      delshow: false,
      pgroup_id: 0,
      patient_user_id: '',
      move_pgroup_id: '',
      checkgroup_id: 0, //当前选中组id
      groupshow: [],
      copy_id: 0,
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.history.go(-1)
    },
    // 箭头变向
    arrow(i) {
      this.icon2[i] = !this.icon2[i]
      console.log(this.icon2)
    },
    // getfindTeamPgroupPatient
    // 获取分组数据
    getfindTeamPgroupPatient() {
      this.$http
        .findTeamPgroupPatient({
          team_id: this.team_id,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data == null) {
              this.$toast('暂无数据！')
            } else {
              this.pgroupList = res.data.data.pgroupList
              this.pgroupPatientList = res.data.data.pgroupPatientList
              // this.$toast('成功！')
              console.log(this.pgroupPatientList)
            }
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 多项选择i:人员id，j：组id
    check(i, j) {
      if (this.checkgroup_id == 0 || this.checkgroup_id == j) {
        this.checkgroup_id = j
        for (var m = 0; m < 100; m++) {
          if (m == j) {
            this.groupshow[m] = false
          } else {
            this.groupshow[m] = true
          }
        }
        console.log(this.groupshow)
        this.checked[i] = !this.checked[i]
        this.arrow(j)
        console.log(this.checked)

        this.flag = false
        this.patient_user_id = ''
        for (var n = 0; n < this.checked.length; n++) {
          if (this.checked[n] == true) {
            this.flag = true
            this.patient_user_id = this.patient_user_id + ',' + (n % 100)
          }
        }
        if (this.flag == false) {
          this.blue = [1, 0, 0, 0]
          this.grey = [0, 1, 1, 1]
          this.checkgroup_id = 0
          this.groupshow = []
        } else {
          this.blue = [0, 1, 1, 1]
          this.grey = [1, 0, 0, 0]
        }
      } else {
        console.log(this.checked)
      }
      console.log(this.patient_user_id.substr(1))
    },
    // del按钮
    del() {
      this.delshow = true
    },
    // del按钮确认
    delg() {
      this.delPgroupPatient()
      this.getfindTeamPgroupPatient()
      this.flag = false
      this.checkgroup_id = 0
      this.groupshow = []
    },
    // delPgroupPatient
    // 删除分组下人员
    delPgroupPatient() {
      this.$http
        .delPgroupPatient({
          team_id: this.team_id,
          pgroup_id: this.checkgroup_id,
          patient_user_id: this.patient_user_id.substr(1),
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('删除人员成功！')
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // move按钮
    move() {
      this.$router.push({
        path: 'movegroup',
        query: {
          team_id: this.team_id,
          pgroup_id: this.checkgroup_id,
          patient_user_id: this.patient_user_id,
          copy_id: 0,
        },
      })
    },
    // copy按钮
    copy() {
      this.$router.push({
        path: 'movegroup',
        query: {
          team_id: this.team_id,
          pgroup_id: this.checkgroup_id,
          patient_user_id: this.patient_user_id,
          copy_id: 1,
        },
      })
    },
  },
  mounted() {
    this.getfindTeamPgroupPatient()
    this.$toast('请在同一组内选择人员')
  },
}
</script>
<style lang="sss" scoped>
/* header divwai div 是标题布局 */
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}

/* main */
.picture {
  width: 25px;
  height: 25px;
  border-radius: 20px;
}
/* btn */
.btn {
  width: 100%;
  height: 60px;
  margin-bottom: 50px;
  position: fixed;
  bottom: 0vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.05);
}
.div1 {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.b1 {
  width: 80%;
  height: 70%;
  background: linear-gradient(90deg, #2f9ee5, #2fd6f2);
  border-radius: 5px;
  border: 0px;
}
.b2 {
  width: 80%;
  height: 70%;
  background: #e5e5e5;
  border-radius: 5px;
  border: 0px;
}
.text {
  font-size: 15px;
  font-family: PingFang SC;
  color: #ffffff;
}

/*dialog  */
.name {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nameinput {
  width: 70%;
  margin-top: 3%;
  margin-bottom: 3%;
  border-radius: 5px;
  border-color: #000;
}
</style>